<template>
  <view class="container">
    <!-- 搜索 -->
    <view class="header">
      <image src="../../static/icon/search.png" mode="" style="position: absolute; left: 50rpx; width: 28rpx; height: 28rpx"></image>
      <input type="text" placeholder="搜索订单" class="ipt" placeholder-class="txtwhite" />
    </view>
    <!-- 头部导航栏 -->
    <view class="nav">
      <view :class="{ navcommon: navindex == index }" @click="changenavindex(index)" v-for="(item, index) in navlist" :key="index">{{ item }}</view>
    </view>
    <!-- 列表 -->
    <scroll-view scroll-y="true" style="height: 1020rpx; background-color: #f8f8f8">
      <view class="item" v-for="item in list" :key="item.id" @click="godetail(item.status, item.id, item.teacher_id)">
        <!-- 状态 -->
        <view class="status">
          {{
            item.status == 1
              ? '课程待支付'
              : item.status == 2
              ? '课程待接单'
              : item.status == 3
              ? '课程进行中'
              : item.status == 4
              ? '课程已结课'
              : item.status == 5
              ? '课程已评价'
              : item.status == 6
              ? '课程已拒绝'
              : item.status == 8
              ? '课程已退款'
              : '课程已取消'
          }}
        </view>
        <!-- 老师信息 -->
        <view class="info">
          <image :src="imgUrl + item.teacher_avatar" mode="aspectFill" style="width: 118rpx; height: 118rpx; margin-right: 18rpx"></image>
          <view class="right">
            <view>
              <text>{{ item.teacher_name }}</text>
              <text style="margin: 0 15rpx">{{ item.grade_name + item.subject_name }}</text>
              <text>{{ item.period_num }}课时</text>
            </view>
            <view style="margin-top: 26rpx">￥{{ item.amount_money }}</view>
          </view>
        </view>
        <!-- 待付金额和按钮 -->
        <view class="btn">
          <!-- :style="{color: item.status == 1 ? "#000"  :  '#ff3400'}" -->
          <view class="price" :style="{ color: item.status != 2 && item.status != 3 && item.status != 4 && item.status != 5 && item.status != 6 ? '#000' : '#ff3400' }">
            {{ (item.status != 2 && item.status != 3 && item.status != 4 && item.status != 5 && item.status != 6 ? '应付款￥' : '实付款￥') + item.amount_money }}
          </view>
          <!-- 待付款 -->
          <view style="display: flex; align-items: center" v-if="item.status == 1">
            <view class="cancelbtn" @click.stop="canclesubject(item.id)">取消课时</view>
            <view class="paybtn" @click.stop="pay(item.id)">去付款</view>
          </view>
          <!-- 已拒绝 -->
          <view style="display: flex; align-items: center" v-if="item.status == 6">
            <view class="paybtn" @click.stop="gofindteacher">找老师</view>
          </view>
          <!-- 已接单 || 待接单 -->
          <view style="display: flex; align-items: center" v-if="item.status == 3 || item.status == 2">
            <view class="cancelbtn" @click.stop="gochangesktime(item.id, item.teacher_id, item.period_id)">取消预约</view>
            <view class="paybtn" @click.stop="gochangesktime(item.id, item.teacher_id, item.period_id)">上课预约</view>
          </view>
          <!-- 已结课 -->
          <view style="display: flex; align-items: center" v-if="item.status == 4">
            <view class="pingjia" @click="gookpingjia(item.id)">评价</view>
            <view class="paybtn" @click.stop="rebuy(item.teacher_id)">再次下单</view>
          </view>
          <!-- 已评价 -->
          <view style="display: flex; align-items: center" v-if="item.status == 5">
            <view class="pingjia" @click="goyipingjia(item.id)">评价</view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      navlist: ['全部订单', '待付款', '待接单', '已接单', '已结课', '已评价', '已拒绝'],
      navindex: 0,
      list: [], // 订单列表
      imgUrl: '' // 图片的基地址
    };
  },
  methods: {
    // 再次下单
    async rebuy(id) {
      uni.redirectTo({
        url: '/parents/skyuyue/skyuyue?id=' + id
      });
    },
    // 跳转到已评价
    goyipingjia(id) {
      uni.navigateTo({
        url: '/parents/pingjiaok/pingjiaok?id=' + id
      });
    },
    // 获取订单列表
    async getorderlist() {
      const res = await uni.$http.post('/user_order/list', {
        status: this.navindex,
        name: ''
      });
      console.log('订单的全部列表', res);
      this.list = res.data.data.list;
    },
    // 取消课时
    async canclesubject(id) {
      await uni.$http.post('/user_order/cancelOrder', {
        order_id: id
      });
      this.getorderlist();
    },
    // 支付
    async pay(id) {
      const res = await uni.$http.post('/user_order/orderPay', {
        order_id: id
      });
      uni.requestPayment({
        provider: 'wxpay',
        package: res.data.data.package,
        paySign: res.data.data.paySign,
        nonceStr: res.data.data.nonceStr,
        timeStamp: res.data.data.timeStamp,
        signType: res.data.data.signType,
        success: (res3) => {
          console.log('支付结果', res3);
          uni.reLaunch({
            url: '/parents/payok/payok'
          });
        },
        fail: (res) => {
          uni.reLaunch({
            url: '/parents/payfalse/payfalse'
          });
        }
      });
    },
    // 切换订单的状态
    changenavindex(index) {
      this.navindex = index;
      this.getorderlist();
    },
    // 跳转到详情页面
    godetail(status, orderid, teacherid) {
      console.log(status);
      if (this.navindex == 1 || status == 1) {
        uni.navigateTo({
          url: '/parents/waitpay/waitpay?id=' + orderid + '&teacherid=' + teacherid
        });
      } else if (this.navindex == 6 || status == 6) {
        uni.navigateTo({
          url: '/parents/refuse/refuse?id=' + orderid + '&teacherid=' + teacherid
        });
      } else if (this.navindex == 3 || this.navindex == 2 || status == 2 || status == 3) {
        uni.navigateTo({
          url: '/parents/recive/recive?id=' + orderid + '&teacherid=' + teacherid
        });
      } else if (this.navindex == 4 || status == 4) {
        uni.navigateTo({
          url: '/parents/yijieke/yijieke?id=' + orderid + '&teacherid=' + teacherid
        });
      } else if (this.navindex == 5 || status == 5) {
        uni.navigateTo({
          url: '/parents/pingjiaok/pingjiaok?id=' + orderid
        });
      } else if (status == 8) {
        //跳转到退款详情
        uni.navigateTo({
          url: '/parents/refund/refund?id=' + orderid
        });
      }
    },
    // 跳转到评价页面
    gookpingjia(id) {
      uni.navigateTo({
        url: '/parents/daipingjia/daipingjia?id=' + id
      });
    },
    // 跳转到继续预约页面
    gochangesktime(id, teacherid, keshiid) {
      uni.navigateTo({
        url: '/parents/changesktime/changesktime?orderid=' + id + '&teacherid=' + teacherid + '&keshiid=' + keshiid
      });
    },
    // 跳转到找老师
    gofindteacher() {
      uni.reLaunch({
        url: '/pages/index/index?status=' + 1 + '&tabbarindex=' + 1
      });
    }
  },
  onLoad(e) {
    if (e.type) {
      console.log(e);
      this.navindex = e.type;
    }
    // 获取订单的全部列表
    this.getorderlist();
    // 配置图片的基地址
    this.imgUrl = this.imgurl;
  }
};
</script>

<style lang="scss" scoped>
.container {
  box-sizing: border-box;
  /deep/ .txtwhite {
    color: #fff !important;
  }
  .header {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100rpx;
    background-color: #3553e8;
    .ipt {
      box-sizing: border-box;
      width: 692rpx;
      height: 64rpx;
      background: #5d75ed;
      padding-left: 80rpx;
      margin: 0 30rpx 0 28rpx;
      border-radius: 100rpx 100rpx 100rpx 100rpx;
    }
  }
  .nav {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    width: 100%;
    height: 80rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 26rpx;
    color: #333333;
    background-color: #f8f8f8;
  }
  .navcommon {
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 28rpx;
    color: #3553e8;
    border-bottom: 4rpx solid #3553e8;
  }
  .item {
    box-sizing: border-box;
    width: 710rpx;
    height: 320rpx;
    margin: 20rpx;
    background: #ffffff;
    padding: 20rpx 30rpx;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    .status {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      font-size: 28rpx;
      color: #3553e8;
    }
    .info {
      display: flex;
      align-items: center;
      padding-bottom: 20rpx;
      border-bottom: 2rpx solid #f1f1f1;
      .right {
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 28rpx;
        color: #333333;
      }
    }
    .btn {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 20rpx;
      .price {
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 28rpx;
        color: #ff3400;
      }
      .cancelbtn {
        box-sizing: border-box;
        width: 160rpx;
        height: 60rpx;
        text-align: center;
        line-height: 60rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 28rpx;
        color: #333333;
        background: #f1f1f1;
        border-radius: 100rpx 100rpx 100rpx 100rpx;
      }
      .paybtn {
        box-sizing: border-box;
        width: 160rpx;
        height: 60rpx;
        margin-left: 20rpx;
        text-align: center;
        line-height: 60rpx;
        background: #3553e8;
        font-weight: 500;
        font-size: 28rpx;
        color: #ffffff;
        border-radius: 100rpx 100rpx 100rpx 100rpx;
      }
      .pingjia {
        box-sizing: border-box;
        width: 160rpx;
        height: 60rpx;
        text-align: center;
        line-height: 60rpx;
        background: #ffffff;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 28rpx;
        color: #3553e8;
        border-radius: 100rpx 100rpx 100rpx 100rpx;
        border: 2rpx solid #3553e8;
      }
    }
  }
}
</style>
<style>
page {
  background-color: #f8f8f8;
}
</style>
